<template>
	<cl-dialog
		title="常见问题"
		width="900px"
		:visible.sync="visible"
		@close="close"
		:props="{
			top: '5vh',
			'append-to-body': true
		}"
	>
		<div ref="scroller" class="body">
			<template v-for="(item, idx) in helps">
				<div :id="`step${idx + 1}`">
					<h3 style="margin-top: 0">
						<img src="@/assets/img/help/help_cover.png" />
						{{ idx + 1 }}、{{ item.title }}
					</h3>
					<div class="content">
						<div
							v-for="(subItem, subIdx) in item.content"
							:key="'step-' + idx + '-' + subIdx"
							class="mb-2"
						>
							<p :id="`step${idx + 1}-${subIdx + 1}`">
								{{ idx + 1 }}-{{ subIdx + 1 }}、<span v-html="subItem.title"></span>
							</p>
							<el-row type="flex" v-if="subItem.imgjoin">
								<cl-flex1 v-for="(img, imgIdx) in subItem.img" :key="imgIdx">
									<el-image
										style="margin-bottom: 0;"
										:src="img"
										:preview-src-list="images"
									/>
								</cl-flex1>
							</el-row>
							<template v-else>
								<el-image
									v-for="(img, imgIdx) in subItem.img"
									:key="imgIdx"
									:src="img"
									:preview-src-list="images"
								/>
							</template>
						</div>
					</div>
				</div>
			</template>
			<!--
			<h3>
				<img src="@/assets/img/help/help_cover.png" />
				4、如何获取客户管理Secret
			</h3>
			<div class="content">
				<p>
					1、点击企业微信管理后台“客户联系”，然后点击“API”，点击“查看”按钮，将Secret发送到企业微信
				</p>
				<img src="@/assets/img/help/4-1.png" />
				<p>
					2、手机打开企业微信，在企业微信团队的对话列表中查看客户联系Secret并复制<a
						href="#step3-3"
						class="color-primary"
						>（同步骤3-3）</a
					>
				</p>
				<el-row type="flex">
					<cl-flex1><img src="@/assets/img/help/3-4.png"/></cl-flex1>
					<cl-flex1><img src="@/assets/img/help/3-5.png"/></cl-flex1>
				</el-row>
				<p>
					3、将复制好的“客户管理Sercret”黏贴到这里
				</p>
				<img src="@/assets/img/help/4-2.png" />
			</div> -->
		</div>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			helps: [
				{
					title: "申请好小程序账号 - 登录微信开发者后台",
					content: [
						{
							title: `链接：<a href="https://mp.weixin.qq.com">https://mp.weixin.qq.com</a> 图中红框为小程序AppId`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/1.1.png']
						},

					]
				},
				{
					title: "重置小程序秘钥",
					content: [
						{
							title: `点击重置小程序秘钥`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/2.1.png']
						},
						{
							title: `点击完重置小程序秘钥，获取的秘钥填写到crm后台-添加小程序中`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/2.2.png']
						}
					]
				},
				{
					title: "修改业务域名",
					content: [
						{
							title: `点击图中修改按钮`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/3.1.png']
						},
						{
							title: `点击弹窗上面的下载校验文件，下载下来的文件传到crm系统。然后在弹框中把业务域名填写成：<a href="https://saas.ad.xmzmmr.com">https://saas.ad.xmzmmr.com</a>`,
							img: [
                                'https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/3.2.png',
                                'https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/3.3.png',
                            ]
						},

					]
				},
				{
					title: "修改服务器域名",
					content: [
						{
							title: `点击图中修改按钮，在弹框中把图中request合法域名填写成：<a href="https://saas.api.v154.xmzmmr.com">https://saas.api.v154.xmzmmr.com</a>`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/4.1.png',]
						},

					]
				},
				{
					title: "下载微信开发者工具",
					content: [
						{
							title: `下载链接：<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</a>`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/5.1.png']
						},

					]
				},
				{
					title: "下载安装好之后打开微信开发工具",
					content: [
						{
							title: `<span style="color:red;">（首次打开开发工具的情况）</span>如果没有添加过小程序选择添加，已经添加过了直接点击已经添加的小程序即可，选择完之后点击确定`,
							img: [
                                'https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/6.1.png',
                                'https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/6.2.png'
                            ]
						},
                        {
							title: `<span style="color:red;">（已经使用过开发工具的情况）</span>点击修改按钮，把AppId修改成需要上传的小程序AppId`,
							img: [
                                'https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/6.3.png',
                            ]
						},
					]
				},
				{
					title: "打开上传代码",
					content: [
						{
							title: `点击上传按钮打开上传代码界面`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/7.1.png']
						},
					]
				},
				{
					title: "填写版本号和备注信息",
					content: [
						{
							title: `填写版本号和备注信息，文字可参考图中文字。填写完成之后点击上传按钮`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/8.1.png']
						},
					]
				},
				{
					title: "上传成功后点击确定就好了",
					content: [
						{
							title: `上传成功后点击确定就好了`,
							img: [
								'https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/9.1.png'
							]
						},
					]
				},
				{
					title: "打开微信开发者后台",
					content: [
						{
							title: `点击提交审核`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/10.1.png']
						},
					]
				},
				{
					title: "提交审核",
					content: [
						{
							title: `填写版本描述，可参考图片中文字`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/11.1.png']
						},
                        {
							title: `点击更新当前版本的用户隐私协议`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/11.2.png']
						},
                        {
							title: `下图中红框都需要填写。第一个红框填写可以参考如下文字：<span style="color:red;">你使用小程序时，为保障你正常使用我们的服务</span>`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/11.3.png']
						},
                        {
							title: `更新完用户隐私协议之后点击提交审核，等待审核完成点击版本管理的发布即可`,
							img: ['https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/saas-group/mini-program/11.4.png']
						},
					]
				},

			],
			index: 1
		};
	},
	computed: {
		images() {
			return this.helps.reduce((prev, curr) => {
				let images = curr.content.map(v => v.img);
				return prev.concat(...images);
			}, []);
		}
	},
	methods: {
		open(index) {
			this.index = index;
			this.visible = true;
			this.$nextTick(() => {
				let scroller = this.$refs.scroller;
				let elStep = document.getElementById("step" + this.index);
				setTimeout(() => {
					scroller.scrollTop = elStep.offsetTop - 70;
				}, 100);
			});
		},
		close() {}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog {
		&__body {
			box-sizing: border-box;
			padding: 10px;
			max-height: none;
		}
		&.is-fullscreen {
			.body {
				height: calc(100vh - 75px);
			}
		}
	}
}

.body {
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	height: 80vh;
	overflow: auto;
	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	h3 {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		margin: 50px auto 0;
		font-size: 20px;
		color: #333;
		img {
			display: inline-block;
			width: 30px;
			margin: 0px;
			margin-right: 20px;
			margin-left: 0px;
		}
	}
	.content {
		padding-left: 45px;
		padding-top: 15px;
		box-sizing: border-box;
		position: relative;
		&::before {
			position: absolute;
			content: "";
			top: 0;
			left: 14px;
			width: 0;
			border-left: 2px dashed #ccc;
			height: 100%;
		}
		::v-deep a {
			color: $primary;
		}
		p {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			line-height: 28px;
			box-sizing: border-box;
			user-select: text;
			&::before {
				position: absolute;
				content: "";
				top: 50%;
				left: -25px;
				width: 20px;
				transform: translate(0, -50%);
				height: 0;
				border-top: 2px dashed #ccc;
			}
		}
		img {
			box-sizing: border-box;
			width: 100%;
			display: block;
			cursor: pointer;
			margin: 20px 0;
		}
	}
}
</style>
